<template>
  <div>
   <template>
        <div>
          <el-descriptions>
            <el-descriptions-item label="单据编号">{{
              data.orderId
            }}</el-descriptions-item>
            <el-descriptions-item label="单据日期">{{
              data.createDate
            }}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{
              data.supplier
            }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{
              data.department
            }}</el-descriptions-item>
            <el-descriptions-item label="业务员">{{
              data.staff
            }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{
              data.statusName
            }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{
              data.count
            }}</el-descriptions-item>
            <el-descriptions-item label="金额">{{
              data.money
            }}</el-descriptions-item>
            <el-descriptions-item label="审批人">{{
              data.approver
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :cell-class-name="orderId"
    >
      <el-table-column  prop="proName" label="商品名" width="200">
      </el-table-column>
      <el-table-column prop="count" label="数量" width="200">
      </el-table-column>
      <el-table-column prop="unitName" label="单位" width="200">
      </el-table-column>
      <el-table-column prop="money" label="单价" width="200">
      </el-table-column>
      <el-table-column prop="subTotal" label="小计" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <el-button type="text" size="small" @click="handleClick(scope.row)"
            >删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PurchaseOrderDetailTable",
  props: ["data"],
  methods: {
    handleClick(row) {
      console.log(row);
    },
    orderId(row) {
      // console.log("orderId row", row);
      // var that = this;
      if (row.columnIndex == 0) {
        return "orderId";
      }
    },
    handleClose(done) {
      done();
    },
  },
  mounted(){
    console.log("PurchaseOrderDetailTable data",this.data)
  },
  data() {
    return {
      tableData: [
        {
          proId:"SP1",
          proName:"牛奶",
          count: 1000,
          money: 2,
          subTotal:2000,
          unitId:1,
          unitName:"件",
        },
      ],
      dialogVisible: false,
    };
  },
};
</script>

<style>
.orderId {
  color: #0090ff !important;
  cursor: pointer;
}

.el-dropdown-link {
  margin-left: 5px;
  font-size: 12px;
  color: #0090ff !important;
  cursor: pointer;
}
</style>